+ function($) {
	$(function() {
		var winW = $(window).width()
		var hammerTableImageBox = document.querySelector('#hammerTableImageBox')
		var mc = new Hammer.Manager(hammerTableImageBox)
		var translateX
		var translateY
		var $hammerTableImageBox = $('#hammerTableImageBox')
		var maxDeltaX = winW - $(hammerTableImageBox).width()
		var maxDelateY = $hammerTableImageBox.offset().top
		var panTimer = null
		var $hammerTableImg = $hammerTableImageBox.find('img')
		var hammerTableImgWidth = $hammerTableImg.width()
		var hammerTableImgHeight = $hammerTableImg.height()
		var hammerTableImageBoxWidth = $hammerTableImageBox.width()
		
		
		
		
		var mc = new Hammer($('#hammerTableImageBox')[0], {
			domEvents: true
		});
		
		$hammerTableImageBox.on('panstart', function(e) {
			translateX = $.getTranslate($hammerTableImageBox[0], 'x')
			translateY = $.getTranslate($hammerTableImageBox[0], 'y')
		})

		$hammerTableImageBox.on('pan', function(e) {
			var deltaX = e.originalEvent.gesture.deltaX
			var deltaY = e.originalEvent.gesture.deltaY
			var panX = deltaX + translateX
			var panY = deltaY + translateY
			if(panX <= 0) {
				panX = 0
			}

			if(panX >= maxDeltaX) {
				panX = maxDeltaX
			}

			if(panY >= 0) {
				panY = 0
			}

			if(panY <= -maxDelateY) {
				panY = -maxDelateY
			}

			panTimer && $.cancelAnimationFrame(panTimer)
			panTimer = $.requesetAnimationFrame(function() {
				$hammerTableImageBox.transform('translate3d(' + panX + 'px,' + panY + 'px,0)')
			})

		})
		
		mc.get('pinch').set({ enable: true });
		
		$hammerTableImageBox.on('pinch', function(e) {
			var scale = e.originalEvent.gesture.scale
			hammerTableImgWidth = $hammerTableImg.width()
			hammerTableImgHeight = $hammerTableImg.height()
			if(hammerTableImgWidth * scale > hammerTableImageBoxWidth && hammerTableImgWidth * scale < 750) {
				$hammerTableImg.css({
					width: hammerTableImgWidth * scale,
					//"margin-left": -left * scale,
					height: hammerTableImgHeight * scale,
					//"margin-top": -top * scale
				})
			}
		})

		$hammerTableImageBox.on("pinchend", function(e) {
			width = hammerTableImgWidth * e.originalEvent.gesture.scale;
			height = hammerTableImgHeight * e.originalEvent.gesture.scale;
			//left = left * e.originalEvent.gesture.scale;
			//top = top * e.originalEvent.gesture.scale;
		});

	})
}(jQuery)